// 封装一个 组件, 对路由的组件进行包裹, 和判断是否需要登录
import { useNavigate } from 'react-router-dom'
import { useSelector } from 'react-redux'
import { useEffect } from 'react'
interface AuthParams {
  needLogin: boolean
  redirectTo: string
  children: React.ReactNode
}

function ValidAuth({ needLogin, redirectTo, children }: AuthParams) {
  // 获取到 token, 因为这里是组件,  所以这里可以使用 useSelector 获取到 redux 的 store 中的数据
  const token = useSelector<{ userSlice: { token: string } }>(
    (state) => state.userSlice.token
  )
  const navigate = useNavigate()
  const isLogin = token ? true : false
  // 判断当前的路由组件是否需要验证和是否已经登录
  useEffect(() => {
    if (needLogin !== isLogin) {
      navigate(redirectTo, { replace: true })
    }
  }, [needLogin, redirectTo, isLogin, navigate])
  // 放行, 添加 <></> 的目的是让 children 当成组件来渲染
  return needLogin === isLogin ? <>{children}</> : null
}

export default ValidAuth
